<template>
	<view>
		<u-navbar title="资源提交" is-fixed
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<view class="contaier">
			<!-- 资料区域 -->
			<view class="form">
				<view>
					客户名称
					<input class="input" disabled="true" type="text" :value="form.username" />
				</view>
				<view>
					分配组长
					<input class="input" disabled="true" type="text" :value="content" />
				</view>
				<!-- <view>
					<view class="">
						分配组长
					</view>

					<view style="display: flex; align-items:center;">
						<u-avatar :src="avatar" size='mini' style='margin: 0 40rpx; '></u-avatar>
						<input class="input" style="width: 400rpx;" disabled="true" type="text" :value="form.leader" />
					</view>

				</view> -->
				<view class="">
					是否有效
					<view class="three">
						<view :class="[isValid?'button-one':'button-two']" @click="isValid=true">有效</view>
						<view :class="[isValid?'button-two':'button-one']" @click="isValid=false">无效</view>
					</view>
				</view>
				<view>
					{{isValid?'实际有效个数':'备注'}}
					<input v-if="isValid" class="input" type="text" disabled="true" v-model="form.num" />
					<view v-else class="textarea">
						<textarea class="area" v-model="form.remarks" auto-height maxlength='150' />
						<text class="textNum">{{textNum}}/150</text>
					</view>
				</view>
			</view>

		</view>
		<button class="pass-login-btn" @click="submit">确认</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isValid: true, //是否有效
				form: {
					username: '', //昵称
					leader: '',
					num: 1,
					remarks: '',
				},
				avatar: '',
				content: '',
				id: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.initData(option.id)
		},
		computed: {
			textNum() {
				return this.form.remarks.length
			}
		},
		methods: {
			initData(id) {
				this.$u.api.getResourcesDetail({
					id
				}).then(res => {
					this.form.username = res.data.customer_nickname
					this.form.leader = res.data.group_leader_text
					this.avatar = res.data.group_leader_image
					this.content = res.data.content
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			bindTextAreaBlur(e) {
				this.form.remarks = e.detail.value
			},
			submit() {
				let data = {
					status: this.isValid ? 1 : 2,
					feedback: this.form.remarks,
					id: this.id
				}
				this.$u.api.resources(data).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						},1000)

					}
				})
			}


		}
	}
</script>

<style lang="scss">
	.contaier {
		margin: 60rpx 40rpx;
		padding: 10rpx 40rpx;
		min-height: 650rpx;
		width: 670rpx;
		border-radius: 40rpx;
		box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);

		.form {
			padding: 20rpx;
			font-size: 30rpx;
			// font-weight: 600;

			.input {
				line-height: 80rpx;
				padding: 0 20rpx;
				margin: 10rpx 0;
				border-radius: 40rpx;
				height: 80rpx;
				background-color: #f5f5f5;
			}

			.textarea {
				// padding: 40rpx;
				min-height: 240rpx !important;
				line-height: 80rpx;
				padding: 0 20rpx;
				margin: 10rpx 0;
				width: 540rpx;
				border-radius: 20rpx;
				// min-height: 80rpx;
				background-color: #f5f5f5;
				position: relative;

				.area {
					min-height: 160rpx !important;
					line-height: 60rpx;
					width: 520rpx;
				}

				.textNum {
					position: absolute;
					bottom: -20rpx;
					right: 5rpx;
					color: #ccc;
					font-size: 20rpx
				}
			}

			.three {
				display: flex;
				justify-content: space-between;

				.button-one {
					margin: 10rpx 0;
					height: 80rpx;
					background-color: #FE3057;
					width: 260rpx;
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
				}

				.button-two {
					margin: 10rpx 0;
					height: 80rpx;
					background-color: #f5f5f5;
					width: 260rpx;
					border-radius: 40rpx;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}

	}

	.pass-login-btn {
		width: 70%;
		font-size: 30rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		background-color: #FE3057;
	}

	.main {
		width: 90%;
		margin: 0rpx auto;
		text-align: center;
	}

	.save-btn {
		color: #3BDCA8;

	}

	.save-btn2 {
		color: #3BDCA8;
		margin-top: 70rpx;

	}

	.avatar-wrap {
		margin-top: 20rpx;
		width: 150rpx;
		height: 150rpx;
		display: inline-block;
		margin-bottom: 0rpx;
		position: relative;

		.icon {
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
		}
	}

	.user-avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.tishi {
		display: block;
		font-size: 18rpx;
		color: #969696;
	}

	.nickname-wrap {
		border-bottom: 2rpx solid #969696;
		width: 50%;
		height: 60rpx;
		margin: 0 auto;
	}
</style>
